<div>
    <!--部门查询页面-->
    <div class="ui top fluid attach container segment">
        <div class="ui blue top attached label">报表统计</div>
        <div class="ui grid">
            <div class="row">
                <div class="four wide column">
                    <div class="ui calendar" id="yearParam">
                        <span class="all-condition-title">选择时间：</span>
                        <div class="ui input">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <button class="ui twitter small button all-button-between-margin" id="statistic-year-query"> 查 询
                    </button>
                </div>
            </div>
        </div>
        <div style="height: 1em;"></div>
        <div class="ui fluid container segment" id="statistic-year-echarts" style="height: 36.2em;">

        </div>
    </div>
</div>

<script>
    $('#yearParam').calendar({
        type: 'year'
    });

    $('#yearParam').calendar("set date", new Date());

    $("#statistic-year-query").click(() => {
        showWaitPromptBox("数据正在加载中...")
        let yearChart = echarts.init(document.getElementById('statistic-year-echarts'));
        let month = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
        let statisticParam = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let queryParam = {
            year:  $("#yearParam").calendar("get date")
        }
        $.ajax({
            url: "queryStatisticByMonth",
            type: 'post',
            data: queryParam,
            async: false,
            beforeSend: (request) => {
                if (constant.csrfToken && constant.csrfHeader) {
                    request.setRequestHeader(constant.csrfHeader, constant.csrfToken);
                }
            },
            success: (data) => {
                if ('0' === data.statusCode) {
                    let res = data.resultList;
                    for (let i = 0; i < res.length; i++) {
                        statisticParam[parseInt(res[i].date.substr(5,6).replace("0","")) - 1] = res[i].num;
                    }
                    closeWaitPromptBox();
                } else if ('-1' === data.statusCode) {
                    closeWaitPromptBox();
                    showErrorPromptBox("", 2);
                }
            },
            error: () => {
                closeWaitPromptBox();
                showErrorPromptBox("系统繁忙，请稍后访问！", 2);
            }
        });

        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: month,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: month,
                    type: 'bar',
                    barWidth: '40%',
                    itemStyle : {
                        normal : {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'blue'
                                }
                            }
                        },
                    },
                    data: statisticParam
                }
            ]
        };

        option && yearChart.setOption(option);

    })

</script>